<!doctype html>
<html lang="en">
<head>
	<title>Watermark Visual Test : Default</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="watermark.js"></script>
	<script type="text/javascript">
	$(function() {
		$("label, #z1").watermark();
		$("#z2").watermark("Plugin option")
	})
	</script>
	<style>
		* {
			margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
		}
		body {
			font-size: 68.5%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		}
		.ui-watermark-container {
			position: relative;
		}
		.ui-watermark-label {
			position: absolute;
			cursor: text;
		}
		label {
			color: red;
		}
		input {
			color: green;
		}
		div {
			border: 1px solid black;
			margin: 1em;
		}
		#x1 {
			padding: 0;
			border: none;
		}
		#x2 {
			padding: 2px;
			border: 1px solid black;
		}
		#x3 {
			padding: 0.5em;
			border: 0.5em solid black;
		}
		#x4 {
			padding: 20px;
			border: 10px solid black;
		}
		#x5 {
			padding: 5em;
			border: 5em solid black;
		}
		#x6 {
			padding: 5px;
			border: none;
		}
		#x7 {
			padding: 0;
			border: 2px solid black;
		}
	</style>
</head>
<body>

<form>
	<div>
		<label for="x1">Search</label>
		<input id="x1" value="Search" />
	</div>
	<div>
		<label for="x2">Search</label>
		<input id="x2" value="Search" />
	</div>
	<div>
		<label for="x3">Search</label>
		<input id="x3" value="Search" />
	</div>
	<div>
		<label for="x4">Search</label>
		<input id="x4" value="Search" />
	</div>
	<div>
		<label for="x5">Search</label>
		<input id="x5" value="Search" />
	</div>
	<div>
		<label for="x6">Search</label>
		<input id="x6" value="Search" />
	</div>
	<div>
		<label for="x7">Search</label>
		<input id="x7" value="Search" />
	</div>
	<div>
		<input id="z1" title="Search" />
	</div>
	<div>
		<input id="z2" />
	</div>
</form>

</body>
</html>
